<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <h1>列组合</h1>
        <div class="layui-row">
            <div class="layui-col-xs5 layui-col-md10" style="background-color: turquoise;">
                5/12(sm) or 10/12(md)
            </div>
            <div class="layui-col-xs7 layui-col-md2" style="background-color: tomato;">
                7/12(sm) or 2/12(md)
            </div>
        </div>
    </div>

    <hr>
    <div class="layui-container">
        <h1>列边距</h1>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs4">
                <div style="background-color: turquoise;">ccc</div>
            </div>
            <div class="layui-col-xs4">
                <div style="background-color: rgb(57, 116, 110);">ccc</div>
            </div>
            <div class="layui-col-xs4">
                <div style="background-color: rgb(29, 75, 71);">ccc</div>
            </div>
        </div>
    </div>

    <hr>
    <div class="layui-container">
        <h1>列偏移</h1>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <div style="background-color: turquoise;">ccc</div>
            </div>
            <div class="layui-col-xs4 layui-col-xs-offset4">
                <div style="background-color: rgb(57, 116, 110);">ccc</div>
            </div>
        </div>
    </div>
</body>
</html>
